<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>钻石转移</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
  <link href="../css/mui.min.css" rel="stylesheet"/>
  <link href="../css/mui.picker.css" rel="stylesheet"/>
  <link href="../css/mui.poppicker.css" rel="stylesheet"/>
  <script>
    var width = window.localStorage.getItem('width');
    document.documentElement.style.fontSize = width ? width / 6.4 + 'px' : '55px';
  </script>
  <style>
    body, html {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      touch-action: none;

      font-size: 0.28rem;
      background-color: white;
    }

    #app {
      width: 100%;
      padding-top: 0.2rem;
      background: white;
      overflow-x: hidden;
      overflow-y: auto;
      padding-bottom: 1rem;
    }
    .giftInterchangeWrap{
      background: #e8e8e8;
      width: 95%;
     margin-left: 2.5%;
      overflow: hidden;
    }
    .wrapBottom{
      margin-bottom: 1.4rem;
    }
    .title{
      width: 90%;
      margin: 0.1rem 0.2rem 0;
      font-size: 0.25rem;
      color: #101010;
      height: 0.5rem;
      line-height: 0.5rem;
      font-weight: bold;
    }
    .inputLabel{
      font-size: 0.24rem;
      width: 80%;
      margin: 0.05rem 0.4rem;
      height: 0.45rem;
      line-height: 0.45rem;
      color: #101010;
    }
    .deviceSelectWrap{
      width: 50%;
      margin-bottom: 0.1rem;
    }
    .mui-select {
      width: 100%;
      margin-left: 0.4rem;
      border: 1px solid #bbbbbb;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      /*color: #ACACB4;*/
      text-indent: 6px;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      background: white;
      color: #101010;
    }

    .mui-select:before {
      top: 1px;
      right: 5px;
      color: #101010;
      font-weight: bold;
    }
    .giftListWrap{
      width: 88%;
      margin-left: 0.4rem;
      margin-bottom: 0.2rem;
    }
    .giftList{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }
    .noChoosedGiftWrap{
      width: 1.5rem;
      height: 1.5rem;
      background: #686868;
    }
    .addImg{
      width: 0.3rem;
      height: 0.3rem;
      margin: 0.6rem;
    }
    .giftImgWrap{
      width: 0.95rem;
      height: 0.95rem;
      margin-bottom: 0.15rem;
    }
    .giftImg{
      width: 100%;
      height: 100%;
    }
    .giftRight{
      margin-right: 0.12rem;
    }
    .jiantouImgWrap{
      width: 100%;
      height: 1.3rem;
      background: white;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .jiantouImg{
      width: 0.4rem;
      height: 0.4rem;
    }
    .choosedGood{
      border: 1px solid #EB5204;
    }
    .actBtnWrap{
      width: 60%;
      margin-left: 20%;
      height: 0.8rem;
      line-height: 0.8rem;
      background: #eb5204;
      text-align: center;
      color: white;
      font-size: 0.25rem;
    }
    /*确认弹窗*/
    .coverView{
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.6);
      overflow: hidden;
      z-index: 500;
    }
    .interchangeWrap{
      background: white;
      width: 80%;
      margin: 45% auto 0;
    }
    .interchangeGiftWrap{
      width: 100%;
      height: 2rem;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .interchangeGiftImg{
      width: 1.2rem;
      height: 1.2rem;
    }
    .sanjiaoRightImg{
      width: 0.6rem;
      height: 0.6rem;
    }

    .actionBtnList{
      width: 100%;
      display: flex;
      height: 1rem;
      align-items: center;
      justify-content: space-around;
    }
    .actionbtn{
      width: 40%;
      height: 0.6rem;
      font-size: 0.28rem;
      line-height: 0.6rem;
      text-align: center;
      border-radius: 0.1rem;
      color: white;
    }
    .confirmBtn{
      background: #FF6800;
    }
    .cancleBtn{
      background:#B9B9B9 ;
    }

  </style>
</head>
<body>
<div id="app" class="mui-content">
  <div class="giftInterchangeWrap">
    <div class="title">第1步：顾客手中的礼品</div>
    <div class="inputLabel">选择机台：</div>
    <div class="deviceSelectWrap">
      	<span id="select-device-top" class="mui-select select-device-top"></span>
    </div>
    <div class="giftListWrap">
      <div class="noChoosedGiftWrap" v-if="topGoodsList.length===0">
        <img src="../images/add_white.png" alt="" class="addImg"/>
      </div>
      <div class="giftList">
        <div :class="{'giftImgWrap':true,'choosedGood':index===topChooseIndex,'giftRight':(index+1)%5!==0}" v-for="(item, index) in topGoodsList" @click="chooseTopGood(index)">
          <img :src="config.imgPath + item.mainImg"  alt="" class="giftImg">
        </div>
      </div>
    </div>
  </div>
  <div class="jiantouImgWrap">
    <img src="../images/sanjiao_bottom.png" alt="" class="jiantouImg">
  </div>
  <!--顾客想换的礼品-->
  <div class="giftInterchangeWrap wrapBottom" >
    <div class="title">第2步：顾客想换的礼品</div>
    <div class="inputLabel">选择机台：</div>
    <div class="deviceSelectWrap">
      <span id="select-device-bottom" class="mui-select select-device-bottom"></span>
    </div>
    <div class="giftListWrap">
      <div class="noChoosedGiftWrap" v-if="bottomGoodsList.length===0">
        <img src="../images/add_white.png" alt="" class="addImg"/>
      </div>
      <div class="giftList">
        <div :class="{'giftImgWrap':true,'choosedGood':index===bottomChooseIndex,'giftRight':(index+1)%5!==0}" v-for="(item, index) in bottomGoodsList" @click="chooseBottomGood(index)">
          <img :src="config.imgPath + item.mainImg"  class="giftImg">
        </div>
      </div>
    </div>
  </div>
  <!--执行按钮-->
  <div class="actBtnWrap" @click="toConfirmInterchange">立即执行</div>
  <!--确认交换-->
  <div class="coverView" v-if="isShowConfirm">
    <div class="interchangeWrap">
      <div class="interchangeGiftWrap">
        <img :src="config.imgPath + topGoodInfo.mainImg" class="interchangeGiftImg">
        <img src="../images/right.png" alt="" class="sanjiaoRightImg">
        <img :src="config.imgPath + bottomGoodInfo.mainImg" class="interchangeGiftImg">
      </div>
      <div class="actionBtnList">
        <div class="confirmBtn actionbtn" @click="confireToInterchange">确认</div>
        <div class="cancleBtn actionbtn" @click="hideConfirmCover">取消</div>
      </div>
    </div>
  </div>
</div>
<script src="../config.js"></script>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.picker.js"></script>
<script src="../js/mui.poppicker.js"></script>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  var vm=new Vue({
    el:'#app',
    data:function () {
      return {
        storeId:'',
        storeDevicesList:[],//门店机台数据列表
        topDeviceId:'',//上侧选择机台id
        bottomDeviceId:'',//下侧选择机台id
        isShowConfirm:false,//是否展示确认弹窗
        topGoodsList:[],//上侧机台货品列表
        bottomGoodsList:[],//下侧机台货品列表
        topGoodInfo:{},//上侧选择货品信息
        bottomGoodInfo:{},//下侧选择货品信息
        topChooseIndex:0,//上侧选择货品下标
        bottomChooseIndex:0,//下侧选择货品下标
        loading:false,
      }
    },
    created:function () {
      var vm = this
      mui.init();
      mui.plusReady(function () {
        vm.receiveParams();
      })
    },
    mounted:function () {

    },
    methods:{
      receiveParams: function () {
        var self = plus.webview.currentWebview();
        var vm = this;
        vm.storeId = self.currentShopObj.storeId;
        this.loadStoreDevices();
        // console.log(JSON.stringify( vm.storeId ))
      },
      loadStoreDevices:function () {//拉取门店机台列表数据
        var vm=this;
        // console.log(vm.storeId);
        config.ajax({
          url:'/shopGoods/getStoreRewards',
          data:{
            storeId:parseInt(vm.storeId)
          },
          success:function(res){
            console.log(JSON.stringify(res));
            if(res.result===1){
              var device={};
             res.rewards.forEach(function (item) {
               device={};
               device.text = item.rewardDeviceName;
               device.value = item.rewardDeviceId;
               vm.storeDevicesList.push(device);
             });
              setTimeout(function () {
                vm.setTopDeviceSelect();
                vm.setBottomDeviceSelect();
              }, 0);
            }else{
              mui.toast(res.message)
            }
          },
          error:function(res){
            mui.toast(res.message)
          }
        })
      },
      loadTopDeviceGoodsList:function(type){//机台礼品列表拉取
        var vm=this;
        config.ajax({
          url:'/shopGoods/getStoreRewardGoods',
          data:{
            "rewardDeviceId":type==='top'?vm.topDeviceId:vm.bottomDeviceId
          },
          success:function(res){
            console.log(JSON.stringify(res));
            if(res.result===1){
              if(type==='top'){
                vm.topGoodsList = res.rewards;
                vm.topGoodInfo = res.rewards[0];
              }else{
                vm.bottomGoodsList = res.rewards;
                vm.bottomGoodInfo = res.rewards[0];
              }
            }else{
              mui.toast(res.message)
            }
          },
          error:function(res){
            mui.toast(res.message)
          }

        })
      },
      chooseTopGood:function(num){
        var vm=this;
        vm.topGoodInfo = vm.topGoodsList[num];
        vm.topChooseIndex = num;
      },
      chooseBottomGood:function(num){
        var vm=this;
        vm.bottomGoodInfo = vm.bottomGoodsList[num];
        vm.bottomChooseIndex = num;
      },
      toConfirmInterchange:function(){
        if(this.topDeviceId&&this.bottomDeviceId&&this.topGoodInfo.goodsId&&this.bottomGoodInfo.goodsId){
          this.isShowConfirm=true;
        }else{
          mui.toast('请选择交换的礼品')
        }
      },
      confireToInterchange:function(){//确认兑换
        var vm=this;


        var datainfo={
          "storeId":vm.storeId,
          "goodsId": vm.topGoodInfo.goodsId,
          "toGoodsId":vm.bottomGoodInfo.goodsId,
          "rewardDeviceId":vm.topDeviceId,
          "toRewardDeviceId":vm.bottomDeviceId
        }
        console.log(JSON.stringify(datainfo));
        if(!vm.loading){
          vm.loading=true;
          config.ajax({
            url:'/shopGoods/executeStoreGoodsExc',
            data:{
              "storeId":vm.storeId,
              "goodsId": vm.topGoodInfo.goodsId,
              "toGoodsId":vm.bottomGoodInfo.goodsId,
              "rewardDeviceId":vm.topDeviceId,
              "toRewardDeviceId":vm.bottomDeviceId
            },
            success:function(res){
              console.log(JSON.stringify(res));
              if(res.result===1){
                mui.toast(res.message);
                vm.isShowConfirm=false;
                plus.webview.currentWebview().hide();
                plus.webview.currentWebview().close();
              }else{
                mui.toast(res.message)
              }
              vm.loading=false
            },
            error:function(res){
              mui.toast(res.message)
              vm.loading=false
            }

          });
        }

      },
      hideConfirmCover:function(){
        this.isShowConfirm = false;
      },
      setTopDeviceSelect:function () {//上侧机台选择列表设置
        var vm=this;
        var topPicker = new mui.PopPicker();
        topPicker.setData(vm.storeDevicesList);
        var topCheck = document.querySelector('#select-device-top');
        topCheck.addEventListener('tap',function (evt) {
          topPicker.show(function (items) {
            topCheck.innerHTML = "<span>" + items[0].text + "</span>";
            vm.topDeviceId=items[0].value;
            console.log( vm.topDeviceId);
            vm.loadTopDeviceGoodsList('top');
          });
        });
      },
      setBottomDeviceSelect:function () {
        var vm=this;
        var bottomPicker = new mui.PopPicker();
        bottomPicker.setData(vm.storeDevicesList);
        var bottomCheck = document.querySelector('#select-device-bottom');
        bottomCheck.addEventListener('tap',function (evt) {
          bottomPicker.show(function (items) {
            bottomCheck.innerHTML = "<span>" + items[0].text + "</span>";
            vm.bottomDeviceId=items[0].value;
            console.log( vm.bottomDeviceId);
            vm.loadTopDeviceGoodsList('bottom');
          });
        });
      },
    },


  })
</script>
</body>
</html>